<script setup>
import { ref, onMounted } from 'vue'
import http_company from '@/api/company.js'
import { ElMessage } from 'element-plus'
import router from '../../router'

const formData = ref({
  companyName: '', //账户名称
  bankAccount: '', // 银行账号
  bankAccountAgain: '', //确认账号
  bankStyle: '' //开户银行
})

const bankList = ref([
  '中国工商银行（ICBC）',
  '中国农业银行（ABC）',
  '中国银行（BOC）',
  '中国建设银行（CCB）',
  '交通银行（BCM）',
  '招商银行（CMB）',
  '中国民生银行（CMBC）',
  '上海浦东发展银行（SPDDB）',
  '中信银行（CITIC Bank）',
  '兴业银行（CIB）'
])

const rules = {
  companyName: [
    {
      required: true,
      message: '请输入账户名称',
      trigger: 'blur'
    }
  ],
  bankAccount: [
    {
      required: true,
      message: '请输入对公账号',
      trigger: 'blur'
    }
  ],
  bankAccountAgain: [
    {
      required: true,
      message: '请输入确认对公账号',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.value.bankAccount) {
          callback(new Error('两次账号不一致'))
        }
        callback()
      },
      trigger: 'blur'
    }
  ],
  bankStyle: [
    {
      required: true,
      message: '请选择开户银行',
      trigger: 'change'
    }
  ]
}

const ruleFormRef = ref()
const auth = async () => {
  await ruleFormRef.value.validate() //进行表单的验证码
  const result = await http_company.authCompany(formData.value)
  if (result.code === 200) {
    ElMessage({
      message: '提交审核成功，3个工作日内出结果。请注意BOSS直聘的短信',
      type: 'success'
    })
    setTimeout(() => {
      router.push('/')
    }, 3000)
  }
}
onMounted(() => {
  window.scrollTo(0, 0)
})
</script>

<template>
  <div class="recruitmentInit-publish">
    <div class="content">
      <div class="title">企业认证</div>
      <div
        style="
          font-size: 12px;
          color: #666;
          margin-top: -60px;
          text-align: center;
        "
      >
        请填写公司对公账户信息，否则无法完成认证
      </div>
      <div class="form">
        <el-form
          :rules="rules"
          ref="ruleFormRef"
          style="margin-top: 40px"
          :model="formData"
          label-width="140px"
        >
          <el-form-item
            prop="companyName"
            style="margin-top: 30px"
            label="账户名称："
          >
            <el-input
              placeholder="请输入对公地账户名称"
              v-model="formData.companyName"
            />
          </el-form-item>
          <el-form-item
            prop="bankAccount"
            style="margin-top: 30px"
            label="对公账号："
          >
            <el-input
              placeholder="请输入对公地账户名称"
              v-model="formData.bankAccount"
            />
          </el-form-item>
          <el-form-item
            prop="bankAccountAgain"
            style="margin-top: 30px"
            label="确认账号："
          >
            <el-input
              placeholder="请输入对公地银行名称"
              v-model="formData.bankAccountAgain"
            />
          </el-form-item>
          <el-form-item
            prop="bankStyle"
            style="margin-top: 30px"
            label="开户银行："
          >
            <el-select v-model="formData.bankStyle" placeholder="请选择">
              <el-option
                v-for="(item, index) in bankList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-button
            style="
              width: 300px;
              height: 40px;
              margin-left: 140px;
              margin-top: 30px;
            "
            type="primary"
            @click="auth"
            >提交认证</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recruitmentInit-publish {
  width: 100%;
  height: 100vh;
  background-color: #00bebd;
  position: relative;
  .content {
    width: 40%;
    height: 70%;
    background-color: #fff;
    border-radius: 2%;
    position: absolute;
    left: 30%;
    top: 15%;
    .title {
      font-size: 26px;
      font-weight: 900;
      color: #409eff;
      text-align: center;
      line-height: 160px;
    }
    .form {
      width: 85%;
    }
  }
}
</style>
